<template>
	<view>
		<view class="bg-white">
			<cu-custom bgColor="bg-gradual-write" :isBack="true">
				<block slot="backText"></block>
				<block slot="content">预约选座</block>
			</cu-custom>
			<view class="cu-bar">
				<view class="action">
					<view>
						<view class="text-lg">{{room.roomName}}</view>
						<view class="text-sm">{{room.roomAddr}}</view>
					</view>
				</view>
				<view class="action text-black" @tap="goPage('/pages/seat/planform')">
					<text>门店平面图<text class="cuIcon-right"></text></text>
				</view>
			</view>
		</view>
		<scroll-view scroll-y style="height: 80vh;">
			<view class="bg-white text-black radius-lg-top margin-lr-xs margin-top-sm">
				<u-tabs :list="timeSelectTypes" @click="changeTimeSelectType"></u-tabs>
			</view>
			<view v-if="timeSelectByHour" class="bg-white margin-lr-xs margin-bottom-sm padding-lr-sm radius-lg-bottom">
				<u--form labelPosition="left" labelWidth="90" :model="uFromModeForHour" ref="uForm">
					<u-form-item label="开始时间" prop="dateInfo.startDate" borderBottom ref="startDate"
						@click="showStartDate = true">
						<u--input placeholder="" border="surround" v-model="uFromModeForHour.dateInfo.startDateDv"></u--input>
					</u-form-item>
					<u-form-item label="预约时段" prop="dateInfo.totalHours" borderBottom ref="totalHours">
						<u-number-box :min="1" :step="1" :max="24" v-model="uFromModeForHour.dateInfo.totalHours" @change="totalHoursChange"></u-number-box>
					</u-form-item>
				</u--form>
				<view class="flex flex-wrap justify-between padding-tb-sm">
					<view v-for="(item, index) in timeRanges" :key="index">
						<u-tag :text="item.name" :plain="!item.checked" size="medium" :name="index"
							@click="timeRangeClick">
						</u-tag>
					</view>
				</view>
				<u-datetime-picker ref="startDatePk" :show="showStartDate" :minDate="uFromModeForHour.dateInfo.minStartDate"
					:maxDate="uFromModeForHour.dateInfo.maxStartDate" mode="datetime" @cancel="cancelStartDate"
					@confirm="confirmStartDate"></u-datetime-picker>
			</view>
			<view v-if="timeSelectByDay" class="bg-white margin-lr-xs margin-bottom-sm padding-lr-sm radius-lg-bottom">
				<u--form labelPosition="left" labelWidth="90" :model="uFromModeForDay" ref="uFormForDay">
					<u-form-item label="开始日期" prop="dateInfo.startDay" borderBottom ref="startDay"
						@click="showStartDay = true">
						<u--input placeholder="" border="surround" v-model="uFromModeForDay.dateInfo.startDayDv"></u--input>
					</u-form-item>
					<u-form-item label="预约天数" prop="dateInfo.totalDays" borderBottom ref="totalDays">
						<u-number-box :min="1" :step="1" :max="30" v-model="uFromModeForDay.dateInfo.totalDays" @change="totalDaysChange"></u-number-box>
					</u-form-item>
				</u--form>
				<view class="flex flex-wrap justify-between padding-tb-sm">
					<view v-for="(item, index) in dayRanges" :key="index">
						<u-tag :text="item.name" :plain="!item.checked" size="medium" :name="index"
							@click="dayRangeClick">
						</u-tag>
					</view>
				</view>
				<u-datetime-picker ref="startDayPk" :show="showStartDay" :minDate="uFromModeForDay.dateInfo.minStartDay"
					:maxDate="uFromModeForDay.dateInfo.maxStartDay" mode="date" @cancel="cancelStartDay"
					@confirm="confirmStartDay"></u-datetime-picker>
			</view>
			<view class="bg-white margin-lr-xs padding-sm radius-lg">
				<!-- 预约情况 -->
				<view style="width: 100%;">
					<view class="flex justify-center align-center text-sm">
						<u-icon name="/static/images/seat/seat.png" size="30"></u-icon>
						<view class="text-lg text-gray text-bold margin-right-lg">可预约:{{noReservedNum}}</view>
						<u-icon name="/static/images/seat/seat-fill.png" size="30"></u-icon>
						<view class="text-lg text-red text-bold">已预约:{{reservedNum}}</view>
					</view>
				</view>
				<!-- 舒适区 -->
				<view v-if="seatVip.length>0">
					<view class="text-lg text-red text-bold text-center margin-tb">{{seatVip[0].areaName+'·舒适区'}}</view>
					<view class="flex flex-wrap justify-start margin-top-sm ">
						<view class="flex flex-wrap justify-center" style="width: 100%">
							<view v-for="(item,index) in seatVip" :key="index" class="flex flex-wrap justify-center"
								style="width: 120rpx;height: 130rpx;">
								<view>
									<u-icon @click="selectSeat(item)" v-if="item.status==true"
										name="/static/images/seat/seat.png" size="30"></u-icon>
									<u-icon v-else name="/static/images/seat/seat-fill.png" size="30"></u-icon>
									<view class="text-lg">{{item.seatNum+'号'}}</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<!-- 经济区 -->
				<view v-if="seatCom.length>0">
					<view class="text-lg text-blue text-bold text-center margin-tb">{{seatCom[0].areaName+'·经济区'}}
					</view>
					<view class="margin-top-sm">
						<view class="flex flex-wrap justify-center" style="width: 100%">
							<view v-for="(item,index) in seatCom" :key="index" class="flex flex-wrap justify-center"
								style="width: 120rpx;height: 130rpx;">
								<view>
									<u-icon @click="selectSeat(item)" v-if="item.status==true"
										name="/static/images/seat/seat.png" size="30"></u-icon>
									<u-icon v-else name="/static/images/seat/seat-fill.png" size="30"></u-icon>
									<view class="text-lg">{{item.seatNum+'号'}}</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="bg-white cu-bar tabbar">
				</view>
			</view>
		</scroll-view>
		<view class="bg-white cu-bar tabbar foot flex justify-end">
			<button @click.stop="toPay" class="cu-btn mid round lines-brown shadow margin-right-lg">确认选座</button>
		</view>
	</view>
</template>

<script>
	import {
		getSeat
	} from '@/api/sr/seat'
	import {
		getRoomInfo,
		getRoomBanners,
		getRoomDetail
	} from '@/api/sr/room'
	import { toast, showConfirm, tansParams } from '@/utils/common'
	export default {
		data() {
			return {
				room: {
					roomId: undefined,
					roomName: undefined,
					roomAddr: undefined,
					phone: undefined,
					longitude: undefined,
					latitude: undefined,
				},
				timeSelectTypes: [{
					name: '按小时',
					value: 0
				}, {
					name: '按天',
					value: 0
				}],
				timeRanges: [{
						name: '1小时',
						value: 1,
						checked: true
					},
					{
						name: '2小时',
						value: 2,
						checked: false
					},
					{
						name: '4小时',
						value: 4,
						checked: false,
					},
					{
						name: '6小时',
						value: 6,
						checked: false
					}
				],
				dayRanges: [{
						name: '2天',
						value: 2,
						checked: true
					},
					{
						name: '4天',
						value: 4,
						checked: false
					},
					{
						name: '5天',
						value: 5,
						checked: false,
					},
					{
						name: '6天',
						value: 6,
						checked: false
					}
				],
				timeSelectByHour: false,
				timeSelectByDay: false,
				showStartDate: false,
				showStartDay: false,
				uFromModeForHour: {
					dateInfo: {
						startDate: '',
						startDateDv: '',
						minStartDate: this.$moment().add(5, 'minutes').valueOf(),
						maxStartDate: this.$moment().add(1, 'days').hours(0).minutes(0).seconds(0).valueOf(),
						endDate: '',
						totalHours: 1,
					},
				},
				uFromModeForDay: {
					dateInfo: {
						startDay: '',
						startDayDv: '',
						minStartDay: this.$moment().add(1, 'days').hours(0).minutes(0).seconds(0).valueOf(),
						maxStartDay: this.$moment().add(30, 'days').hours(0).minutes(0).seconds(0).valueOf(),
						endDay: '',
						totalDays: 2,
					},
				},
				seatCom: [], //经济区
				seatVip: [], //舒适区
				reservedNum: 0, //已预约
				noReservedNum: 0, //可预约
				seat: {}
			}
		},
		onReady() {
			// 微信小程序需要用此写法
			this.$refs.startDatePk.setFormatter(this.formatter)
		},
		onLoad() {
			this.getRoomInfo(uni.getStorageSync('roomId'))
			this.timeSelectByHour = true;
			const start = this.$moment().add(5, 'minutes').second(0).format('YYYY-MM-DD HH:mm:ss');
			this.uFromModeForHour.dateInfo.startDate = start;
			this.uFromModeForHour.dateInfo.startDateDv = start.substring(0, start.length - 3);
			this.timeRangeClick(0);
			console.info('seat:', start, this.uFromModeForHour.dateInfo.endDate, uni.getStorageSync('roomId'));
			this.setSeat(start, this.uFromModeForHour.dateInfo.endDate, uni.getStorageSync('roomId'))
		},
		methods: {
			formatter(type, value) {
				if (type === 'year') {
					return `${value}年`
				}
				if (type === 'month') {
					return `${value}月`
				}
				if (type === 'day') {
					return `${value}日`
				}
				if (type === 'hour') {
					return `${value}时`
				}
				if (type === 'minute') {
					return `${value}分`
				}
				return value
			},
			async getRoomInfo(roomId) {
				getRoomInfo(roomId).then(response => {
					let data = response.data;
					console.info('getRoomInfo', data)
					this.room = data;
				});
			},
			timeRangeClick(name) {
				this.timeRanges.map((item, index) => {
					item.checked = index === name ? true : false
					if (index === name) {
						this.setEndDate(item.value);
						this.uFromModeForHour.dateInfo.totalHours = item.value;
						this.setSeat(this.uFromModeForHour.dateInfo.startDate, this.uFromModeForHour.dateInfo.endDate, '1523324098582265857')
					}
				})
			},
			dayRangeClick(name) {
				this.dayRanges.map((item, index) => {
					item.checked = index === name ? true : false
					if (index === name) {
						this.setEndDay(item.value);
						this.uFromModeForDay.dateInfo.totalDays = item.value;
						this.setSeat(this.uFromModeForDay.dateInfo.startDay, this.uFromModeForDay.dateInfo.endDay, '1523324098582265857')
					}
				})
			},
			totalHoursChange(e) {
				console.log('当前值为: ' + e.value)
				this.setEndDate(e.value);
				this.uFromModeForHour.dateInfo.totalHours = e.value;
				this.setSeat(this.uFromModeForHour.dateInfo.startDate, this.uFromModeForHour.dateInfo.endDate, '1523324098582265857')				
			},
			totalDaysChange(e) {
				console.log('当前值为: ' + e.value)
				this.setEndDay(e.value);
				this.uFromModeForDay.dateInfo.totalDays = e.value;
				this.setSeat(this.uFromModeForDay.dateInfo.startDay, this.uFromModeForDay.dateInfo.endDay, '1523324098582265857')				
			},
			setEndDate(totalHours) {
				this.uFromModeForHour.dateInfo.endDate = this.$moment(this.uFromModeForHour.dateInfo
					.startDate).add(totalHours, 'hours').format(
					'YYYY-MM-DD HH:mm:ss');				
			},
			setEndDay(totalDays) {
				this.uFromModeForDay.dateInfo.endDay = this.$moment(this.uFromModeForDay.dateInfo
					.startDay).add(totalDays, 'days').format(
					'YYYY-MM-DD HH:mm:ss');				
			},
			setTotalHours() {
				let startDate = this.$moment(this.uFromModeForHour.dateInfo
					.startDate);
				let endDate = this.$moment(this.uFromModeForHour.dateInfo
					.endDate);
				this.uFromModeForHour.dateInfo.totalHours = endDate.diff(startDate, 'hours');
				console.info('totalHours', this.uFromModeForHour.dateInfo.totalHours)
			},
			setTotalDays() {
				let startDay = this.$moment(this.uFromModeForDay.dateInfo
					.startDay);
				let endDay = this.$moment(this.uFromModeForDay.dateInfo
					.endDay);
				this.uFromModeForDay.dateInfo.totalDays = endDay.diff(startDay, 'days');
				console.info('totalDays', this.uFromModeForDay.dateInfo.totalDays)
			},
			changeTimeSelectType(item) {
				console.log('item', item);
				if (item.index === 0) {
					this.timeSelectByHour = true;
					this.timeSelectByDay = false;
					this.uFromModeForHour.dateInfo.startDate = this.$moment().add(5, 'minutes').second(0).format('YYYY-MM-DD HH:mm:ss');
					this.uFromModeForHour.dateInfo.startDateDv = this.uFromModeForHour.dateInfo.startDate.substring(0, this.uFromModeForHour
						.dateInfo.startDate.length - 3)
					this.setEndDate(this.uFromModeForHour.dateInfo.totalHours);	
				} else if (item.index === 1) {
					this.timeSelectByHour = false;
					this.timeSelectByDay = true;
					this.uFromModeForDay.dateInfo.startDay = this.$moment().add(1,'days').hours(0).minutes(0).seconds(0).format('YYYY-MM-DD HH:mm:ss');
					this.uFromModeForDay.dateInfo.startDayDv = this.uFromModeForDay.dateInfo.startDay.substring(0, this.uFromModeForDay
						.dateInfo.startDay.length - 9)
					this.setEndDay(this.uFromModeForDay.dateInfo.totalDays);
				} 
			},
			async setSeat(start, end, id) {
				const params = {
					roomId: id,
					startTime: start,
					endTime: end
				}
				getSeat(params).then(res => {
					console.log("所有座位详情", res)
					this.seatCom = res.data.seatCom
					this.seatVip = res.data.seatVip
					this.reservedNum = res.data.reservedNum
					this.noReservedNum = res.data.noReservedNum
				}).catch(errors => {})
			},
			confirmStartDate(e) {
				this.showStartDate = false;
				this.uFromModeForHour.dateInfo.startDate = this.$moment(e.value).format('YYYY-MM-DD HH:mm:ss');
				this.uFromModeForHour.dateInfo.startDateDv = this.uFromModeForHour.dateInfo.startDate.substring(0, this.uFromModeForHour
					.dateInfo.startDate.length - 3)
				this.setEndDate(this.uFromModeForHour.dateInfo.totalHours);
				console.info('confirmStartDate', this.uFromModeForHour.dateInfo)
				this.setSeat(this.uFromModeForHour.dateInfo.startDate, this.uFromModeForHour.dateInfo.endDate, '1523324098582265857')
			},
			cancelStartDate() {
				this.showStartDate = false;
			},
			confirmStartDay(e) {
				this.showStartDay = false;
				this.uFromModeForDay.dateInfo.startDay = this.$moment(e.value).format('YYYY-MM-DD HH:mm:ss');
				this.uFromModeForDay.dateInfo.startDayDv = this.uFromModeForDay.dateInfo.startDay.substring(0, this.uFromModeForDay
					.dateInfo.startDay.length - 9)
				this.setEndDay(this.uFromModeForDay.dateInfo.totalDays);
				console.info('confirmStartDay', this.uFromModeForDay.dateInfo)
				this.setSeat(this.uFromModeForDay.dateInfo.startDay, this.uFromModeForDay.dateInfo.endDay, '1523324098582265857')
			},
			cancelStartDay() {
				this.showStartDay = false;
			},
			goPage(url) {
				this.$tab.navigateTo(url)
			},
			selectSeat(seat) {
				if (this.seat) {
					this.seat.status = true;
				}
				this.seat = seat;
				seat.status = false;
				console.log(seat)
			},
			toPay() {
				const that = this
				console.info('toPay', this.timeSelectByHour, this.uFromModeForHour.dateInfo.totalHours, this.timeSelectByDay, this.uFromModeForDay.dateInfo.totalDays)
				if(this.timeSelectByHour){
					if (this.uFromModeForHour.dateInfo.totalHours < 1) {
						toast('预约时间至少一个小时，请重新预约！')
					} else {
						this.$u.route({
							url: '/pages/seat/payment',
							params: {
								room: JSON.stringify(that.room),
								seat: JSON.stringify(that.seat),
								start: that.uFromModeForHour.dateInfo.startDate,
								end: that.uFromModeForHour.dateInfo.endDate,
								total: that.uFromModeForHour.dateInfo.totalHours,
								priceType: 0,
							}
						})
					}
				}else if(this.timeSelectByDay){
					if (this.uFromModeForDay.dateInfo.totalDays < 1) {
						toast('预约时间至少一个小时，请重新预约！')
					} else {
						this.$u.route({
							url: '/pages/seat/payment',
							params: {
								room: JSON.stringify(that.room),
								seat: JSON.stringify(that.seat),
								start: that.uFromModeForDay.dateInfo.startDay,
								end: that.uFromModeForDay.dateInfo.endDay,
								total: that.uFromModeForDay.dateInfo.totalDays,
								priceType: 1,
							}
						})
					}					
				}
			},
		}
	}
</script>

<style lang="scss">

</style>